<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="../../lib/bootstrap@3.3.4/css/bootstrap.css">
<style>
    .box{
        margin: 50px;
    }
</style>
<body>
    <div class="box">
      <table class="table table-bordered">
         <thead>
             <tr>
                 <td>
                     <input type="checkbox" name="" id="" @change="selectedYN" v-model="check">
                 </td>
                 <td>编号</td>
                 <td>名字</td>
                 <td>数量</td>
                 <td>价格</td>
                 <td>总价</td>
                 <td>功能</td>
             </tr>
         </thead>
         <tbody>
             <tr v-for="(item,index) in list">
                 <td>
                     <input type="checkbox" name="" id="" :checked="item.checked">
                 </td>
                 <td>{{item.id}}</td>
                 <td>{{item.name}}</td>
                 <td>
                     <button @click="add(index)">+</button>
                     <span>{{item.num}}</span>
                     <button @click="dis(index)">-</button>
                 </td>
                 <td>{{item.price}}</td>
                 <td>{{item.num * item.price}}</td>
                 <td>
                     <button @click="del(index)">删除</button>
                 </td>
             </tr>
         </tbody>
      </table>
      <h1>总计：{{sum}}</h1>
    </div>
    <script>
        const vm = new Vue({
            el:'.box',
            data:{
                list:[{checked:true,id:'01',name:'xx',num:10,price:10},{checked:false,id:'02',name:'yy',num:20,price:10},{checked:false,id:'03',name:'oo',num:15,price:10}],
                sum:0,
                check:true
            },
            methods: {
                add(index){
                    this.list[index].num++;
                },
                dis(index){
                    this.list[index].num--
                },
                del(index){
                    this.list.splice(index,1);
                },
                selectedYN(){
                    console.log(1);
                    console.log(this.check);
                },


            },
        })
    </script>
</body>
</html>